import React from 'react';

import './index.less';

import { createPage } from 'nc-lightapp-front';
import { render } from '../../../../hrpub/common/frame';

import MainAction from '../actions/main';
import ButtonAction from '../actions/btn';
import TableAction from '../actions/table';
import TabAction from '../actions/tab';

import Layout from '../../../../hrpub/common/components/Layout';
import PageHeader from '../components/Header';
import Table from '../components/Table';

import { base } from 'nc-lightapp-front';

const { Header, Left, Content } = Layout;

const HomePage = render({
	actions: {
		mainAct: MainAction,
		btnAct: ButtonAction,
		tableAct: TableAction,
		tabAct: TabAction
	}
})(({ props, action, state }) => {
	const { emp, button, editTable, search, meta } = props;
	return (
		<div className="nc-bill-list">
			<Choose>
				<When condition={emp.page === 'main'}>
					<Layout>
						<Header
							showButtons={false}
							showOrgRefer={true}
							orgReferOptions={{
								getOrgData: action.btnAct.changeOrg,
								orgVal: emp.orgValue,
								disabled: emp.orgAble
							}}
							button={button}
							customButton={(() => {
								return (
									<PageHeader
										onClick={action.btnAct.addHeaderClick}
										button={button}
										editOnClick={action.tableAct.toEditStatus}
										saveOnClick={action.tableAct.toBrowseStatus}
										cancelOnClick={action.tableAct.toBeforeStatus}
										status={emp.pageStatus}
									/>
								);
							})()}
						/>
						<Content>
							<div className="nc-bill-card" style={{ height: 'auto' }}>
								<Table {...props} />
							</div>
						</Content>
					</Layout>
				</When>
			</Choose>
		</div>
	);
});

export default createPage({})(HomePage);
